<template>
  <van-nav-bar title="退货物流" left-arrow @click-left="back" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 退货信息 -->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <!-- 客户的寄件地址 -->
          <van-field
            v-model="region"
            is-link
            readonly
            label="寄件地址"
            placeholder="点击选择寄件地址"
            @click="showAddressPicker = true"
            :rules="[{ required: true, message: '请选择寄件地址' }]"
          />
          <van-popup v-model:show="showAddressPicker" position="bottom">
            <van-picker
              :columns="Addresscolumns"
              @confirm="onAddresscConfirm"
              @cancel="showAddressPicker = false"
            />
          </van-popup>

          <van-field
            v-model="express"
            is-link
            readonly
            label="物流公司"
            placeholder="点击选择退货物流"
            @click="showEexpressPicker = true"
            :rules="[{ required: true, message: '请选择退货物流' }]"
          />
          <van-popup v-model:show="showEexpressPicker" position="bottom">
            <van-picker
              :columns="Eexpresscolumns"
              @confirm="onEexpressConfirm"
              @cancel="showEexpressPicker = false"
            />
          </van-popup>

          <van-field
            v-model="expresscode"
            name="expresscode"
            label="快递单号"
            placeholder="请填写快递单号"
            :rules="[{ required: true, message: '请填写快递单号' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </section>
  </section>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const back = () => proxy.$router.push("/order/index");
let business = proxy.$cookies.get("business") ? proxy.$cookies.get("business") : {};
business = reactive(business);
let orderid = proxy.$route.query.hasOwnProperty("orderid")
  ? proxy.$route.query.orderid
  : 0;
orderid = ref(orderid);
const info = ref({
  address: {},
});
const showAddressPicker = ref(false);
const showEexpressPicker = ref(false);
const Addresscolumns = ref([
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
]);
const Eexpresscolumns = ref([]);
const express = ref("");
const expressid = ref("");
const region = ref("");
const expresscode = ref("");
const businessaddrid = ref("");
onBeforeMount(() => {
  getInfoData();
  getRefundData();
});
const getInfoData = async () => {
  let result = await proxy.$POST({
    url: "/order/info",
    params: {
      orderid: orderid.value,
      busid: business.id,
    },
  });
  if (result && result.code == 1) {
    info.value = result.data;
  }
};
const getRefundData = async () => {
  let result = await proxy.$POST({
    url: "/order/refundgoodsinfo",
    params: {
      busid: business.id,
    },
  });
  if (result && result.code == 1) {
    Eexpresscolumns.value = result.data.expresslist;
    Addresscolumns.value = result.data.addresslist;
  }
};

const onEexpressConfirm = ({ selectedOptions }) => {
  express.value = selectedOptions[0]?.text;
  expressid.value = selectedOptions[0]?.value;
  showEexpressPicker.value = false;
};

const onAddresscConfirm = ({ selectedOptions }) => {
  region.value = selectedOptions[0]?.text;
  businessaddrid.value = selectedOptions[0]?.value;
  showAddressPicker.value = false;
};

const onSubmit = async () => {
  let result = await proxy.$POST({
    url: "/order/refundgoods",
    params: {
      orderid: orderid.value,
      busid: business.id,
      businessaddrid: businessaddrid.value,
      expressid: expressid.value,
      expresscode: expresscode.value,
    },
  });
  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  } else {
    proxy.$success({
      message: result.msg,
      duration: 1000,
      onClose: () => {
        proxy.$router.push("/order/index");
        return false;
      },
    });
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>
